<template>
  <div class="category">
    <ul class="left">
      <li
        v-for="category in categories"
        :key="category.id"
        is="router-link"
        :to="'/category/sub/' + category.id"
        tag="li"
      >{{ category.name }}</li>
    </ul>
    <div class="right">
      <router-view />
    </div>
  </div>
</template>

<script>
import { getAllCategories } from '@/api/category'

export default {
  name: 'Category',
  data () {
    return {
      categories: []
    }
  },
  created () {
    getAllCategories()
      .then(res => {
        console.log(res)
        // 将 api 接口中返回的分类数据保存到 categories 数组中
        this.categories = res
        // 编程式导航：默认向第一个分类下的子分类页面跳转
        this.$router.push('/category/sub/2').catch(() => {})
      })
  }
}
</script>

<style lang="scss" scoped>
.category {
    display: flex;
    height: 100%;
    .left {
      width: 100px;
      height: 100%;
      background: #eee;

      li {
        height: 30px;
        line-height: 30px;
        padding-left: 8px;
      }
    }
    .right {
      overflow-x: hidden;
      flex: 1;
    }

    .router-link-exact-active.router-link-active {
      color: #666;
      background: #fff;
    }
  }
</style>
